<template>
	<view class="collect">
		<image v-if="!isPressed" class="collect_img" src="../static/icons/collect_tobe.png" @click="pressCollect"></image>
		<image v-else class="collect_img" src="../static/icons/collect_already.png" @click="pressCollect"></image>
		<i v-if="!isPressed">{{collectNum}}</i>
		<i v-if="isPressed">{{collectNum+1}}</i>
	</view>
</template>

<script>
	export default{
		props:["collectNum","type","mid","uid"],
		data(){
			return{ 
				isPressed:false
				
			}
		},
		methods:{
			pressCollect(){
				this.isPressed=!this.isPressed;
				if(this.isPressed){
					this.getCollect()
				}else{
					this.subCollect()
				}
																
			},				
			async getCollect(){
				const res=await this.$myRequest({
					url:'/User/api/addFavorite/userid='+this.uid+'&'+this.type+'aid='+this.mid
				})
			},
			async subCollect(){
				const res=await this.$myRequest({
					url:'/User/api/subFavorite/userid='+this.uid+'&'+this.type+'aid='+this.mid
				})
			}
		}
	}
</script>

<style lang="less">
	.collect{
		display: flex;
		.collect_img{
			height:60rpx;
			width:60rpx;
		}
		i{
			display: inline-block;
			margin-left:5rpx;
			line-height: 60rpx;
			font-size: 15px;
		}
	}
</style>
